import React, { PureComponent } from 'react'
import './style.css'

/**
 * 该组件用于监听鼠标的变化
 */
export default class MouseListener extends PureComponent {
    state = {
        x: 0,
        y: 0
    }

    divRef = React.createRef()

    handleMouseMove = (e) => {
        // 更新 x 和 y 的值
        const { left, top } = this.divRef.current.getBoundingClientRect()
        this.setState({
            x: Math.ceil(e.pageX - left),
            y: Math.ceil(e.pageY - top)
        })
    }

    render() {
        return (
            <div ref={this.divRef} className='point' onMouseMove={this.handleMouseMove}>
                {
                    this.props.render
                        ? this.props.render(this.state)
                        : "哈哈"
                }
            </div>
        )
    }
}
